<style lang="scss" scoped>
@import "./_init.scss";
@import "./_form.scss";
</style>

<template lang="pug">
.VUE
    tab
    form(@submit.prevent="submit" ref="form")
        .P
            input(v-focus="1" name="val" v-model.trim="val" :type="type" :placeholder="'请输入您的'+cn0" autocomplete="off" spellcheck="false" :disabled="resend" required title="海外手机请加前缀「+国家号」，如+86-13513559923")
            label.I(:class="'I-'+en0")
        div(v-if="resend===false")
            p
                button.new(type="submit") 验证{{cn0}}
            p
                a.button(:href="'/auth/'+en1+'/new'" @click="toggle(en1)") {{cn1}}注册 
        .resend(v-if="resend!==false")
            .P(v-if="en0=='mail'")
                p 激活邮件已发送
                p 请到
                    a(:href="mail_link") {{val.split('@').pop().toUpperCase()}}
                    | 查收
            .P(v-else-if="typeof(code)=='string'")
                p 手机验证短信已成功发送
                p 请输入验证码<input name="code" type="number" v-focus="1" placeholder="六位数字" v-model="code" autocomplete="off">
            .P(v-else-if="code==true")
                .I-loading
            .P(v-else="code==false" style="color:#f00")
                p 验证码输入错误
                p(v-if="resend") {{resend}} 秒后，将自动重发验证码
            p
                a.button(:class="{disabled:resend>0}" @click="resend<=0&&submit()")
                    | 没收到？
                    span(v-if="resend>0")
                        span.second 
                            | {{resend}}
                            span 秒
                        | 后
                    | 点此重发  
            p
                a.button.gray(:href="'/auth/'+en0+'/new'" @click="reload") 使用其他{{cn0}}注册

</template>

<script lang="coffee">
captcha = require './_captcha'
ERROR = require './_error.coffee'
_timer = 0

CN = ['手机', '邮箱']
EN = ['phone', 'mail']
export default require('./_nologin.coffee') {
    data : ->
        {
            cn0:''
            cn1:''
            en0:''
            en1:''
            resend:false
            val : ''
            code:''
        }
    components: {
        tab:require './_tab.vue'
    }
    computed:{
        type:->
            if @en0 == "mail" then "email" else "tel"
        mail_link:->
            require("~coffee/_lib/mail_link") @val
    }
    watch:{
        code:(val)->
            code = @code
            if code.length == 6
                @code = true
                $(@$refs.form).find("input[name=code]").attr("disabled", true)
                $.post("*auth/phone/verify", {phone:@val, code}).then(
                    (code)->
                        GO.push "/auth/phone-#{code}"
                    (err)=>
                        @code = false
                        if @resend < 7
                            @timer 7
                        return
                )
            return
    }
    mounted:->
        @toggle(@$route.params.en)
        @val = @$route.params.account or ''

    methods:{
        reload:->
            clearInterval _timer
            @resend = false
            @code = ''
            @$nextTick =>
                $(@$refs.form).find('input:first').focus().select()

        toggle:(en)->
            pos = EN.indexOf(en)
            @cn0 = CN[pos]
            @en0 = EN[pos]
            pos = (pos+1)%EN.length
            @cn1 = CN[pos]
            @en1 = EN[pos]
            @val = ''
            form = $(@$refs.form)
            form.err({})
            form.find('input:first').focus().select()

        timer:(resend)->
            clearInterval(_timer)
            @resend = resend
            _timer = setInterval(
                =>
                    -- @resend
                    if @resend <= 0
                        clearInterval _timer
                        if @code == false
                            @submit()
                            @code = ''
                            form.find('input[name=code]').focus()
                1000
            )
        submit:->
            form = $(@$refs.form)
            val = @val.trim()
            
            en = @en0
            data = {
                host : location.host
            }
            data[en] = val

            captcha(
                form
                "*auth/#{en}/new"
                data
                (r)=>
                    @timer 60
                (err)=>
                    switch err.val
                        when ERROR.MAIL.EXIST then err.val = """该邮箱已注册，<a href="/auth/login-#{$.escape val}">点此登录</a>"""
                        when ERROR.MAIL.FORMAT then err.val = "邮箱格式不正确"
                        when ERROR.MAIL.LENGTH then err.val = "邮件地址太长了"
                    return err
            )

    }
}
</script>

